<template>
  <div id="mg-List" v-if="mgData !== undefined">
    <div class="mg-page-item  animate__animated animate__slideInUp" v-for="item in mgData" :key="item.mangaId">
      <div class="mg-cover-box">
        <div class="mg-text-box">
          {{ item.lastEpName ? '更新至' + item.lastEpName : '暂未开始' }}
        </div>
        <!--    有缩略图则加载缩略图，无则加载高清图    -->
        <img loading="lazy" decoding="async" :src="item.thumbCoverUrl ? item.thumbCoverUrl : item.coverUrl" @click="toEpPage(item.mangaId)" alt=""/>
      </div>
      <div class="mg-title text-ellipsis" @click="toEpPage(item.mangaId)">
        {{ item.name }}
      </div>
      <div class="mg-time">
        {{ item.cnTeam }}<br/>
        上次更新 {{ formatToDay(new Date(item.modifyTime)) }}
      </div>
    </div>
  </div>
</template>

<script>
import {formatToDay} from "@/util/timeUtil";

export default {
  name: 'mgList',
  props: ['mgData'],
  data() {
    return {
    }
  },
  methods: {
    formatToDay,
    toEpPage(id) {
      this.$router.push("/mgEp?id=" + id)
    }
  }
}

</script>

<style scoped lang="scss">
@import url("@/scss/mgList.scss");
</style>